<template>
  <a-modal v-model:visible="modalVisible" @ok="handleOk" @cancel="handleCancel">
    <template #title> 新建菜单 </template>
    <div>
      <a-form :model="form" auto-label-width>
        <a-form-item field="roleName" label="上级菜单：">
          <!-- <a-input
            placeholder="请输入角色名称"
            v-model="form.roleName"
            allow-clear
          ></a-input> -->

          <a-cascader
            :field-names="fieldNames"
            v-model="form.parentId"
            :options="GetMenuData"
            check-strictly
          />
        </a-form-item>
        <a-form-item
          tooltip="选择隐藏则路由将不会出现在侧边栏，但仍然可以访问"
          field="menuName"
          label="显示状态："
        >
          <a-radio-group v-model="form.menuType">
            <a-radio value="M">目录</a-radio>
            <a-radio value="C">菜单</a-radio>
            <a-radio value="F">按钮</a-radio>
          </a-radio-group>
        </a-form-item>
        <a-form-item field="roleCode" label="图标选择器：">
          <a-popover title="Title" trigger="click">
            <a-input placeholder="Please enter something" allow-clear />
            <template #content>
              <p>Here is the text content</p>
              <p>Here is the text content</p>
            </template>
          </a-popover>
        </a-form-item>
        <a-form-item field="menuName" label="菜单名称：">
          <!-- <a-input
            placeholder="请输入角色名称"
            v-model="form.roleName"
            allow-clear
          ></a-input> -->

          <a-input v-model="form.menuName" allow-clear />
        </a-form-item>
        <a-form-item
          tooltip="选择隐藏则路由将不会出现在侧边栏，但仍然可以访问"
          field="menuName"
          label="显示状态："
        >
          <a-radio-group v-model="form.visible">
            <a-radio :value="1">显示</a-radio>
            <a-radio :value="2">隐藏</a-radio>
          </a-radio-group>
        </a-form-item>
        <a-form-item
          field="roleName"
          tooltip="访问的路由地址，如：`user`，如外网地址需内链访问则以`http(s)://`开头"
          label="路由地址："
        >
          <a-input v-model="form.path" allow-clear />
        </a-form-item>
        <a-form-item
          field="roleName"
          tooltip="访问的路由地址，如：`user`，如外网地址需内链访问则以`http(s)://`开头"
          label="组件地址："
        >
          <a-input v-model="form.component" allow-clear />
        </a-form-item>
      </a-form>
    </div>
  </a-modal>
</template>

<script lang="ts" setup>
  import { reactive, computed, ref, watchEffect } from 'vue';
  import { GetRouters } from '@/api/menu';
  import { cloneDeep } from 'lodash';

  const props = withDefaults(
    defineProps<{
      formList: any;
      visible: boolean;
    }>(),
    {
      visible: false
    }
  );

  const emit = defineEmits(['update:visible', 'addMenuEmit']);

  const GetMenuData = ref([
    {
      id: 1,
      menuName: '主分类',
      parentID: 0,
      orderNum: 0,
      path: '',
      component: '',
      query: '',
      isFrame: 1,
      isCache: 0,
      menuType: '',
      visible: 1,
      perms: '',
      status: 1,
      icon: '#',
      remark: '',
      children: []
    }
  ]);
  const fieldNames = { value: 'id', label: 'menuName' };
  const GetRoleData = async () => {
    try {
      const res = await GetRouters();
      let replaceStr = JSON.parse(
        JSON.stringify(res)
          .replace(/"node"/g, '"children"')
          .replace(/"menuId"/g, '"id"')
      );
      GetMenuData.value[0].children = replaceStr;

      // return replaceStr;
    } catch (error: unknown) {
      console.log(error);
    }
  };
  GetRoleData();

  // 判断用户是否显示弹出框
  const modalVisible = computed({
    get() {
      return props.visible;
    },
    set(visible: boolean) {
      emit('update:visible', visible);
    }
  });

  let form = reactive({
    parentId: null,
    menuName: '',
    component: '',
    visible: 1,
    path: '',
    menuType: '',
    orderNum: 1,
    status: 1
  });

  const rules = reactive({});

  // 确定
  const handleOk = async () => {
    emit('addMenuEmit', form);
    modalVisible.value = false;
  };

  // 取消
  const handleCancel = () => {
    modalVisible.value = false;
  };

  // watchEffect(() => {
  //   if (modalVisible.value) {
  //     // form = cloneDeep(props.formList);
  //     // console.log(form);
  //   }
  // });
</script>

<style scoped lang="less">
  .demo-basic {
    margin-top: 5px;
    width: 500px;
    // margin: auto;
    background-color: aliceblue;
  }
</style>
